<template>
	<view class="online-filter-box" :class="{end: !supportSort}">
		<view v-if="supportSort" class="sort-box">
			<slot name="sort" />
		</view>
		<view v-if="supportSort" class="divider" />
		<view class="filter flex-row-start" @click="showFilter = !showFilter">
			<view class="mobile-font icon-filter" style="font-size: 28rpx;margin-right: 2rpx;"></view>
			筛选
		</view>
		<!-- 过滤窗口 -->
		<u-popup class="filter-box" v-model="showFilter" mode="bottom" height="80%" closeable border-radius="40">
			<view class="pop-con">
				<view class="top">
					<text>筛选</text>
				</view>
				<view class="main">
					<slot />
				</view>
				<view class="bottom flex-row-start">
					<u-button @click="onReset()" :custom-style="customStyle">重置</u-button>
					<u-button type="primary" @click="onRefresh()" :custom-style="customStyle1">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'onlineCustomFilterBox',
		props: {
			supportSort: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				showFilter: false,
				customStyle: {
					borderRadius: '0',
					border: '1px solid #ebedf0'
				},
				customStyle1: {
					borderRadius: '0',
				}
			}
		},
		methods: {
			onRefresh() {
				this.$emit('refresh');
				this.showFilter = false;
			},
			onReset() {
				this.$emit('reset');
				this.showFilter = false;
			}
		}
	}
</script>

<style lang="scss">
	.online-filter-box {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		&.end {
			justify-content: flex-end;
		}

		.sort-box {
			flex-grow: 1;
			flex-shrink: 1;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap
		}

		.divider {
			width: 2rpx;
			height: 36rpx;
			background: #E8E8E8;
			margin: auto 16rpx;
		}
	}

	.pop-con {
		padding: 32rpx 48rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;

		.top {
			margin-bottom: 24rpx;
			text-align: center;

			text {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.main {
			flex-grow: 1;
			height: 200rpx;
		}

		.bottom {
			button::after {
				border-radius: 0 !important;
				border: none;
			}

			&>u-button,
			&>.u-btn{
				&:first-child {
					width: 208rpx;
				}

				&:last-child {
					flex: 1;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>